<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>仓库产品展示</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f9;
      padding: 20px;
      margin: 0;
    }

    h1 {
      text-align: center;
      color: #333;
    }

    .category-container {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      margin-top: 20px;
      width: 100%;
      box-sizing: border-box;
    }

    .category-card {
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 10px;
      padding: 20px;
      margin: 10px auto;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      position: relative;
      width: 100%;
      max-width: 1200px;
      box-sizing: border-box;
    }

    .category-title {
      font-weight: bold;
      font-size: 18px;
      color: #333;
      margin-bottom: 15px;
      text-align: center;
    }

    .products-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 15px; /* 增加间距确保产品项不拥挤 */
      margin-top: 10px;
      width: 100%;
      box-sizing: border-box;
      justify-content: center; /* 产品项居中排列 */
    }

    .product-item {
      background-color: #f9f9f9;
      border-radius: 5px;
      padding: 10px;
      text-align: center;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: transform 0.2s ease-in-out;
      box-sizing: border-box;
      /* 固定产品宽度设置 */
      width: 120px; /* 固定宽度值，可根据需要调整 */
      flex: none; /* 禁用flex缩放 */
    }

    /* 仅保留必要的媒体查询（仓库卡片移动端适配） */
    @media (max-width: 575px) {
      .category-card {
        padding: 15px 10px;
        width: 100%;
        margin: 10px 0;
      }
    }

    .product-item:hover {
      transform: scale(1.05);
    }

    .product-icon {
      font-size: 24px;
      margin-bottom: 5px;
    }

    .product-name {
      font-size: 14px;
      color: #555;
      margin-bottom: 5px;
    }

    .product-count {
      font-weight: bold;
      color: #333;
      background-color: #e8f5e9;
      border-radius: 10px;
      padding: 2px 0;
      font-size: 12px;
    }

    .low-stock {
      background-color: #fff3e0;
      border: 1px solid #ff9800;
    }

    .category-summary {
      margin-top: 15px;
      padding-top: 10px;
      border-top: 1px dashed #ccc;
      font-weight: bold;
      color: #666;
      text-align: right;
      font-size: 14px;
    }

    .alert {
      position: absolute;
      top: 10px;
      right: 10px;
      background-color: #ffcc00;
      color: #333;
      padding: 3px 8px;
      border-radius: 12px;
      font-weight: bold;
      font-size: 12px;
      animation: pulse 1s infinite;
    }

    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }

    .debug-border {
      border: 1px dashed red !important;
    }

    .debug-info {
      font-family: monospace;
      font-size: 12px;
      color: #ff5722;
      background-color: rgba(255, 255, 255, 0.9);
      padding: 5px;
      margin: 5px 0;
      border-radius: 4px;
    }
  </style>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const debugInfo = document.createElement('div');
      debugInfo.className = 'debug-info';
      debugInfo.textContent = `视口宽度: ${window.innerWidth}px | 视口高度: ${window.innerHeight}px`;
      document.body.prepend(debugInfo);

      window.addEventListener('resize', function() {
        debugInfo.textContent = `视口宽度: ${window.innerWidth}px | 视口高度: ${window.innerHeight}px`;
      });

      const eventSource = new EventSource("/view/warehouse");

      eventSource.onmessage = function(event) {
        const warehouseData = JSON.parse(event.data);
        const categoryContainer = document.getElementById('categoryContainer');
        categoryContainer.innerHTML = '';

        if (warehouseData.size === 0) {
          categoryContainer.innerHTML = `
            <div style="text-align: center; padding: 50px; font-size: 18px; color: #666;">
              没有创建仓库
            </div>
          `;
          return;
        }

        const warehouseCard = document.createElement('div');
        warehouseCard.classList.add('category-card');

        warehouseCard.innerHTML += `
          <div class="category-title">仓库信息</div>
          <div style="margin-bottom: 15px; text-align: center;">
            <div>总容量: ${warehouseData.capacity}</div>
            <div>已使用: ${warehouseData.capacity - warehouseData.freeSpace}/${warehouseData.capacity}</div>
            <div>剩余空间: ${warehouseData.freeSpace}</div>
          </div>

          <div class="category-title">产品列表</div>
          <div class="products-grid debug-border">
            <div style="width: 100%; text-align: center; font-size: 12px; color: #673ab7;">
              网格宽度: <span id="gridWidth"></span>px | 产品宽度: 120px（固定）
            </div>
        `;

        Object.entries(warehouseData.items).forEach(([productName, quantity], index) => {
          const isLowStock = quantity < 5;

          warehouseCard.innerHTML += `
            <div class="product-item ${isLowStock ? 'low-stock' : ''} debug-border" id="product-${index}">
              <div class="product-icon">📦</div>
              <div class="product-name">${productName}</div>
              <div class="product-count">${quantity}个</div>
              <div style="font-size: 10px; color: #ff5722;">
                宽度: 120px（固定）
              </div>
            </div>
          `;
        });

        warehouseCard.innerHTML += `
          </div>
          <div class="category-summary">总计: ${Object.keys(warehouseData.items).length}种产品</div>
        `;

        categoryContainer.appendChild(warehouseCard);

        setTimeout(() => {
          const gridElement = warehouseCard.querySelector('.products-grid');
          const gridWidthElement = warehouseCard.querySelector('#gridWidth');
          if (gridWidthElement && gridElement) {
            gridWidthElement.textContent = gridElement.offsetWidth;
          }
        }, 0);
      };
    });
  </script>
</head>
<body>
<h1>仓库产品展示</h1>
<div id="categoryContainer" class="category-container"></div>
</body>
</html>
